<!DOCTYPE html>
<html lang="en">
<head>
    <title>侧边栏L2-好友动态页</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- 引入字体 -->
    <script src="../../js/libs/webfontloader.min.js"></script>
    <script>
        WebFont.load({
            google: {
                families: ['Roboto:300,400,500,700:latin']
            }
        });
    </script>
    <!-- 引入bootstrap css -->
    <link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap-reboot.css">
    <link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../../Bootstrap/dist/css/bootstrap-grid.css">
    <!-- 引入主要 css -->
    <link rel="stylesheet" type="text/css" href="../../css/main.css">
    <link rel="stylesheet" type="text/css" href="../../css/fonts.min.css">
</head>
<body class="page-has-left-panels">
<!-- Preloader 预加载 -->
<div id="hellopreloader">
    <div class="preloader">
        <svg width="45" height="45" stroke="#fff">
            <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="6" stroke="none">
                    <animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="6;22"/>
                    <animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
                             repeatCount="indefinite" values="1;0"/>
                    <animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                             values="2;0"/>
                </circle>
                <circle cx="22" cy="22" r="8">
                    <animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
                             values="6;1;2;3;4;5;6"/>
                </circle>
            </g>
        </svg>
        <div class="text">Loading ...</div>
    </div>
</div>
<!-- ... end Preloader 结束预加载-->
<!-- Fixed Sidebar Left 左侧菜单 -->
<div class="fixed-sidebar">
    <!--折叠时左侧菜单-->
    <div class="fixed-sidebar-left sidebar--small" id="sidebar-left">
        <a href="person_main.html" class="logo">
            <div class="img-wrap">
                <img src="../../img/logo.png" alt="Olympus">
            </div>
        </a>
        <div class="mCustomScrollbar" data-mcs-theme="dark">
            <ul class="left-menu">
                <!--切换菜单栏-->
                <li>
                    <a href="#" class="js-sidebar-open">
                        <svg class="olymp-menu-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="切换菜单栏">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
                        </svg>
                    </a>
                </li>
                <!--新闻广场-->
                <li>
                    <a href="news.html">
                        <svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="新闻广场">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
                        </svg>
                    </a>
                </li>
                <!--好友动态-->
                <li>
                    <a href="publish_friends.html">
                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="好友动态">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                        </svg>
                    </a>
                </li>
                <!--个人中心-->
                <li>
                    <a href="person_detail.html">
                        <svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
                             data-placement="right" data-original-title="个人中心">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--end折叠时左侧菜单-->
    <!--展开时左侧菜单-->
    <div class="fixed-sidebar-left sidebar--large" id="sidebar-left-1">
        <a href="person_main.html" class="logo">
            <div class="img-wrap">
                <img src="../../img/logo.png" alt="Olympus">
            </div>
            <div class="title-block">
                <h6 class="logo-title">olympus</h6>
            </div>
        </a>
        <div class="mCustomScrollbar" data-mcs-theme="dark">
            <ul class="left-menu">
                <!--切换菜单栏-->
                <li>
                    <a href="#" class="js-sidebar-open">
                        <svg class="olymp-close-icon left-menu-icon">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                        </svg>
                        <span class="left-menu-title">切换菜单栏</span>
                    </a>
                </li>
                <!--新闻广场-->
                <li>
                    <a href="news.html">
                        <svg class="olymp-newsfeed-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-newsfeed-icon"></use>
                        </svg>
                        <span class="left-menu-title">新闻广场</span>
                    </a>
                </li>
                <!--好友动态-->
                <li>
                    <a href="publish_friends.html">
                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip" data-placement="right"
                             data-original-title="">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                        </svg>
                        <span class="left-menu-title">好友动态</span>
                    </a>
                </li>
                <!--个人中心-->
                <li>
                    <a href="person_detail.html">
                        <svg class="olymp-manage-widgets-icon left-menu-icon" data-toggle="tooltip"
                             data-placement="right" data-original-title="">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-manage-widgets-icon"></use>
                        </svg>
                        <span class="left-menu-title">个人中心</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--end展开时左侧菜单-->
</div>
<!-- ... end Fixed Sidebar Left 结束左侧菜单-->
<!-- Header-BP 头部导航栏-->
<header class="header" id="site-header">
    <div class="page-title">
        <h6>好友动态</h6>
    </div>
    <div class="header-content-wrapper">
        <!--数据：搜索-->
        <form class="search-bar w-search notification-list friend-requests">
            <div class="form-group with-button">
                <input class="form-control" placeholder="搜索人或事……" type="text" required/>
                <button>
                    <svg class="olymp-magnifying-glass-icon">
                        <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon"></use>
                    </svg>
                </button>
            </div>
        </form>
        <!--end数据：搜索-->
        <div class="control-block">
            <!--导航栏用户-->
            <div class="author-page author vcard inline-items more">
                <div class="author-thumb">
                    <!--数据：当前用户头像-->
                    <img alt="author" src="../../img/author-page.jpg" class="当前用户">
                    <div class="more-dropdown more-with-triangle">
                        <div class="mCustomScrollbar" data-mcs-theme="dark">
                            <div class="ui-block-title ui-block-title-small">
                                <h6 class="title">当前</h6>
                            </div>
                            <ul class="account-settings">
                                <li>
                                    <a href="person_detail.html">
                                        <svg class="olymp-menu-icon">
                                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-menu-icon"></use>
                                        </svg>
                                        <span>个人资料</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="publish_add.html">
                                        <svg class="olymp-star-icon left-menu-icon" data-toggle="tooltip"
                                             data-placement="right" data-original-title="FAV PAGE">
                                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                                        </svg>
                                        <span>发表动态</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="logged_out.html">
                                        <svg class="olymp-logout-icon">
                                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-logout-icon"></use>
                                        </svg>
                                        <span>登出</span>
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
                <!--数据：当前用户昵称-->
                <a href="person_main.html" class="author-name fn">
                    <div class="author-title">
                        James Spiegel
                        <svg class="olymp-dropdown-arrow-icon">
                            <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-dropdown-arrow-icon"></use>
                        </svg>
                    </div>
                </a>
            </div>
            <!--end导航栏用户-->
        </div>
    </div>
</header>
<!-- ... end Header-BP 结束头部导航栏-->
<!--头部空间-->
<div class="header-spacer"></div>
<!--结束头部空间-->
<!--好友动态主体-->
<div class="container">
    <div class="row">
		<!--占位用-->
		<div class="col col-xl-1 col-lg-12 col-md-12 col-sm-12 col-12"></div>
        <!-- 左侧 --><!--数据：好友头像、动态发布时间、概要、获赞、获评论数、动态详情地址-->
        <div class="col col-xl-10 col-lg-12 col-md-12 col-sm-12 col-12">
            <!-- 好友单条动态 -->
            <div class="ui-block">
                <article class="hentry post">
                    <!--数据：动态发布者昵称、头像、动态发布时间-->
                    <div class="post__author author vcard inline-items">
                        <img src="../../img/author-page.jpg" alt="author">
                        <div class="author-date">
                            <a class="h6 post__author-name fn" href="person_main.html">James
                                Spiegel</a>
                            <div class="post__date">
                                <time class="published">
                                    2021/3/25 10:39
                                </time>
                            </div>
                        </div>
                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>
                            <ul class="more-dropdown">
                                <!--数据：动态详情地址-->
                                <li>
                                    <a href="publish_detail.html">
                                        <button class="btn btn-primary btn-sm">查看详情</button>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--数据：动态内容概要-->
                    <p>
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                        fugiat
                        nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
                        qui
                        officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste
                        natus
                        error sit voluptatem accusantium doloremque.
                    </p>
                    <!--数据：动态被赞以及被评论数-->
                    <div class="post-additional-info inline-items">
                        <!--事件：点赞处理-->
                        <button class="post-add-icon inline-items btn">
                            <svg class="olymp-heart-icon">
                                <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                            </svg>
                            <!--被赞数量-->
                            <span>8</span>
                        </button>
                        <div class="comments-shared">
                            <button class="post-add-icon inline-items btn">
                                <svg class="olymp-speech-balloon-icon">
                                    <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-speech-balloon-icon"></use>
                                </svg>
                                <!--被评论数量-->
                                <span>17</span>
                            </button>
                        </div>
                    </div>
                </article>
            </div>
            <!-- 结束好友单条动态 -->
            <div class="ui-block">
                <article class="hentry post">
                    <!--数据：动态发布者昵称、头像、动态发布时间-->
                    <div class="post__author author vcard inline-items">
                        <img src="../../img/author-page.jpg" alt="author">
                        <div class="author-date">
                            <a class="h6 post__author-name fn" href="person_main.html">James
                                Spiegel</a>
                            <div class="post__date">
                                <time class="published">
                                    2021/3/25 10:39
                                </time>
                            </div>
                        </div>
                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>
                            <ul class="more-dropdown">
                                <!--数据：动态详情地址-->
                                <li>
                                    <a href="publish_detail.html">
                                        <button class="btn btn-primary btn-sm">查看详情</button>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--数据：动态内容概要-->
                    <p>
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                        fugiat
                        nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
                        qui
                        officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste
                        natus
                        error sit voluptatem accusantium doloremque.
                    </p>
                    <!--数据：动态被赞以及被评论数-->
                    <div class="post-additional-info inline-items">
                        <!--事件：点赞处理-->
                        <button class="post-add-icon inline-items btn">
                            <svg class="olymp-heart-icon">
                                <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                            </svg>
                            <!--被赞数量-->
                            <span>8</span>
                        </button>
                        <div class="comments-shared">
                            <button class="post-add-icon inline-items btn">
                                <svg class="olymp-speech-balloon-icon">
                                    <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-speech-balloon-icon"></use>
                                </svg>
                                <!--被评论数量-->
                                <span>17</span>
                            </button>
                        </div>
                    </div>
                </article>
            </div>
            <div class="ui-block">
                <article class="hentry post">
                    <!--数据：动态发布者昵称、头像、动态发布时间-->
                    <div class="post__author author vcard inline-items">
                        <img src="../../img/author-page.jpg" alt="author">
                        <div class="author-date">
                            <a class="h6 post__author-name fn" href="person_main.html">James
                                Spiegel</a>
                            <div class="post__date">
                                <time class="published">
                                    2021/3/25 10:39
                                </time>
                            </div>
                        </div>
                        <div class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>
                            <ul class="more-dropdown">
                                <!--数据：动态详情地址-->
                                <li>
                                    <a href="publish_detail.html">
                                        <button class="btn btn-primary btn-sm">查看详情</button>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--数据：动态内容概要-->
                    <p>
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                        fugiat
                        nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
                        qui
                        officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste
                        natus
                        error sit voluptatem accusantium doloremque.
                    </p>
                    <!--数据：动态被赞以及被评论数-->
                    <div class="post-additional-info inline-items">
                        <!--事件：点赞处理-->
                        <button class="post-add-icon inline-items btn">
                            <svg class="olymp-heart-icon">
                                <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                            </svg>
                            <!--被赞数量-->
                            <span>8</span>
                        </button>
                        <div class="comments-shared">
                            <button class="post-add-icon inline-items btn">
                                <svg class="olymp-speech-balloon-icon">
                                    <use xlink:href="../../svg-icons/sprites/icons.svg#olymp-speech-balloon-icon"></use>
                                </svg>
                                <!--被评论数量-->
                                <span>17</span>
                            </button>
                        </div>
                    </div>
                </article>
            </div>
        </div>
        <!-- 结束左侧 -->
		<!--占位用-->
		<div class="col col-xl-1 col-lg-12 col-md-12 col-sm-12 col-12"></div>
    </div>
</div>
<!--结束好友动态-->
<!--向上返回 按钮-->
<a class="back-to-top" href="#">
    <img src="../../svg-icons/back-to-top.svg" alt="arrow" class="back-icon">
</a>

<!-- JS Scripts -->
<script src="../../js/jQuery/jquery-3.4.1.js"></script>
<script src="../../js/libs/jquery.appear.js"></script>
<script src="../../js/libs/jquery.mousewheel.js"></script>
<script src="../../js/libs/perfect-scrollbar.js"></script>
<script src="../../js/libs/jquery.matchHeight.js"></script>
<script src="../../js/libs/svgxuse.js"></script>
<script src="../../js/libs/imagesloaded.pkgd.js"></script>
<script src="../../js/libs/Headroom.js"></script>
<script src="../../js/libs/velocity.js"></script>
<script src="../../js/libs/ScrollMagic.js"></script>
<script src="../../js/libs/jquery.waypoints.js"></script>
<script src="../../js/libs/jquery.countTo.js"></script>
<script src="../../js/libs/popper.min.js"></script>
<script src="../../js/libs/material.min.js"></script>
<script src="../../js/libs/bootstrap-select.js"></script>
<script src="../../js/libs/smooth-scroll.js"></script>
<script src="../../js/libs/selectize.js"></script>
<script src="../../js/libs/swiper.jquery.js"></script>
<script src="../../js/libs/isotope.pkgd.js"></script>
<script src="../../js/libs/ajax-pagination.js"></script>
<script src="../../js/libs/circle-progress.js"></script>
<script src="../../js/libs/loader.js"></script>
<script src="../../js/libs/run-chart.js"></script>
<script src="../../js/libs/jquery.magnific-popup.js"></script>
<script src="../../js/libs/ion.rangeSlider.js"></script>

<script src="../../js/main.js"></script>
<script src="../../js/libs-init/libs-init.js"></script>
<script defer src="../../fonts/fontawesome-all.js"></script>

<script src="../../Bootstrap/dist/js/bootstrap.bundle.js"></script>

</body>

</html>